<template>
	<view>
		<DrawingBoard
			:bgImage="'/static/bg.png'"
			backgroundColor="#f5f5f5"
			penColor="blue"
			penWidth="3"
			@saved="onSignSaved"
		/>
	</view>
</template>

<script>
import DrawingBoard from '@/components/DrawingBoard/DrawingBoard.vue';
export default { 
  components: { DrawingBoard }, 
  onShow() {
    // 获取列表数据
    this.getList();
  },
  // 第一 在需要的页面 配置 onReachBottom （页面滚动到底部的事件）
  // 第二 配置 pages.json 文件中 onReachBottomDistance（单位是px） 配置项，参数为距离底部距离
  onReachBottom (e) {
    console.log('onReachBottom', e);
    // 触发加载更多
    // this.loadMore();
    // 切换时，要注意清空数据，不然可能造成数据重复
  },
  methods: {
    clear() {
      this.list = [];
    },
    // 获取基础列表数据，如果需要加载更多数据，直接通过 this.loadMore()
    // 把这两个分开写更容易维护一些，放在一起写也减少不了太多代码量
    getList() {
      this.clear();
      // 获取数据
    },
    // 加载更多
    loadMore(base64) {
      console.log(base64);
      // this.list = [...this.list, ...res.data.list];
      // 如果需要分组直接调用 utils 中的 分组函数即可，这个是与上一次请求的最后一次进行比对，如果相同放到一组，不同放到新的一组（前提是后端要对数据进行排序）
    },
  },
};
</script>
